import React, { useState, useEffect } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Progress } from '../../components/ui/progress';

const meta: Meta<typeof Progress> = {
  title: 'UI/Progress',
  component: Progress,
  tags: ['autodocs'],
  argTypes: {
    value: {
      control: { type: 'range', min: 0, max: 100 },
      description: '进度值（0-100）',
    },
    className: {
      control: 'text',
      description: '自定义样式类',
    },
  },
};

export default meta;
type Story = StoryObj<typeof Progress>;

export const Default: Story = {
  args: {
    value: 40,
  },
};

export const Small: Story = {
  args: {
    value: 60,
    className: 'h-1',
  },
};

export const Large: Story = {
  args: {
    value: 80,
    className: 'h-4',
  },
};

export const CustomColor: Story = {
  args: {
    value: 50,
    className: 'bg-gray-200 [&>div]:bg-green-500',
  },
};

export const Animated: Story = {
  render: function AnimatedProgress() {
    const [progress, setProgress] = useState(0);
    
    useEffect(() => {
      const timer = setTimeout(() => {
        setProgress(progress >= 100 ? 0 : progress + 5);
      }, 500);
      
      return () => clearTimeout(timer);
    }, [progress]);
    
    return (
      <div className="w-full space-y-2">
        <Progress value={progress} />
        <div className="text-sm text-center">{progress}%</div>
      </div>
    );
  },
};

export const WithLabels: Story = {
  render: () => (
    <div className="w-full space-y-1">
      <div className="flex justify-between text-sm">
        <span>上传进度</span>
        <span>75%</span>
      </div>
      <Progress value={75} />
    </div>
  ),
};

export const MultipleSteps: Story = {
  render: () => (
    <div className="w-full space-y-6">
      <div className="space-y-1">
        <div className="flex justify-between text-sm">
          <span>步骤 1: 完成</span>
          <span>100%</span>
        </div>
        <Progress value={100} className="h-2 [&>div]:bg-green-500" />
      </div>
      
      <div className="space-y-1">
        <div className="flex justify-between text-sm">
          <span>步骤 2: 进行中</span>
          <span>60%</span>
        </div>
        <Progress value={60} className="h-2 [&>div]:bg-blue-500" />
      </div>
      
      <div className="space-y-1">
        <div className="flex justify-between text-sm">
          <span>步骤 3: 未开始</span>
          <span>0%</span>
        </div>
        <Progress value={0} className="h-2" />
      </div>
    </div>
  ),
};
